<template>
    <div>
        <!-- 日期 -->
        <div class="block">
            <span class="demonstration">时间范围</span>
            <el-date-picker
                v-model="dataValue"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary">查询</el-button>
        </div>

        <div class="content">
            <div id="myCharts" ref="myCharts"></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 日期函数
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
            dataValue: "",
        };
    },
    mounted() {
        const myCharts = this.$echarts.init(this.$refs.myCharts);
        let options = {
            title: {
                text: "堆叠区域图",
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                    label: {
                        backgroundColor: "#6a7985",
                    },
                },
            },
            legend: {
                data: [
                    "邮件营销",
                    "联盟广告",
                    "视频广告",
                    "直接访问",
                    "搜索引擎",
                ],
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                },
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "周一",
                        "周二",
                        "周三",
                        "周四",
                        "周五",
                        "周六",
                        "周日",
                    ],
                },
            ],
            yAxis: [
                {
                    type: "value",
                },
            ],
            series: [
                {
                    name: "邮件营销",
                    type: "line",
                    stack: "总量",
                    areaStyle: {},
                    data: [120, 132, 101, 134, 90, 230, 210],
                },
                {
                    name: "联盟广告",
                    type: "line",
                    stack: "总量",
                    areaStyle: {},
                    data: [220, 182, 191, 234, 290, 330, 310],
                },
                {
                    name: "视频广告",
                    type: "line",
                    stack: "总量",
                    areaStyle: {},
                    data: [150, 232, 201, 154, 190, 330, 410],
                },
                {
                    name: "直接访问",
                    type: "line",
                    stack: "总量",
                    areaStyle: {},
                    data: [320, 332, 301, 334, 390, 330, 320],
                },
                {
                    name: "搜索引擎",
                    type: "line",
                    stack: "总量",
                    label: {
                        normal: {
                            show: true,
                            position: "top",
                        },
                    },
                    areaStyle: {},
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                },
            ],
        };
        myCharts.setOption(options);
    },
};
</script>

<style lang="less" scoped>
.block {
    .demonstration {
        color: #67696d;
        margin-right: 10px;
    }
    .el-button {
        margin-left: 10px;
    }
}
.content {
    width: 100%;
    height: 500px;
    background: #fff;
    #myCharts {
        margin-top: 20px;
        width: 1000px;
        height: 500px;
        padding: 20px;
        box-sizing: border-box;
    }
}
</style>